<template>
  <view class="content">
    <view class="content-img-k">
      <image src="/static/images/icon-phbg.png" mode="widthFix"></image>
    </view>
    <view class="content-ph">
      <view class="content-ph-two">
        <view class="content-ph-two-image">
          <image src="/static/images/icon-top2.png" />
        </view>
        <view class="content-ph-two-name">
          {{ resignUserList[1] ? resignUserList[1].userName : '暂未排名' }}
        </view>
        <view class="content-ph-two-f">
          {{ resignUserList[1] ? resignUserList[1].rewardPoint + '分' : '——' }}
        </view>
      </view>
      <view class="content-ph-one">
        <view class="content-ph-one-image">
          <image src="/static/images/icon-top1.png" />
        </view>
        <view class="content-ph-one-name">
          {{ resignUserList[0] ? resignUserList[0].userName : '暂未排名' }}
        </view>
        <view class="content-ph-one-f">
          {{
            resignUserList[0].rewardPoint
              ? resignUserList[0].rewardPoint + '分'
              : '——'
          }}
        </view>
      </view>
      <view class="content-ph-three">
        <view class="content-ph-three-image">
          <image src="/static/images/icon-top3.png" />
        </view>
        <view class="content-ph-three-name">
          {{ resignUserList[2] ? resignUserList[2].userName : '暂未排名' }}
        </view>
        <view class="content-ph-three-f">
          {{ resignUserList[2] ? resignUserList[2].rewardPoint + '分' : '——' }}
        </view>
      </view>
    </view>

    <view>
      <view class="content-pm-list">
        <view class="content-pm-list-icom">
          <image src="/static/images/icon-list.png" />
          <view class="scroll-view-k">
            <view class="scroll-view-k-top">
              <view class="meberItem-idnex">排名</view>
              <view class="meberItem-name">昵称</view>
              <view class="meberItem-hx">用时</view>
              <view class="meberItem-f">分数</view>
            </view>
            <scroll-view
              class=""
              scroll-y="true"
              style="height: calc(100% - 150rpx); overflow: scroll"
              class="scroll-Y"
              @scrolltolower="lower"
            >
              <view
                class="scroll-view-k-item"
                v-for="(item, index) in resignUserList"
                :key="index"
                v-if="index <= 99"
              >
                <view class="meberItem-idnex">
                  <text>{{ index + 1 }}</text>
                </view>
                <view class="meberItem-name">{{ item.userName }}</view>
                <view class="meberItem-hx">{{ item.duration }}</view>
                <view class="meberItem-f">{{ item.rewardPoint }}</view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { BASE_URL_IMAHE } from '../../../utils/https'
import { getPointRankPage } from '@/api/index/index'
export default {
  data() {
    return {
      imgurl: BASE_URL_IMAHE,
      ruleIntroduce: '',
      ruleImage: '',
      resignUserList: [],
      userRef: '',
      pageNo: 1,
      pageSize: 20,
      pageTotal: 0,
    }
  },
  onLoad(options) {
    this.userRef = uni.getStorageSync('userRef')
      ? uni.getStorageSync('userRef')
      : ''
    this.getlist()
  },
  created() {},
  methods: {
    async getlist() {
      let res = await getPointRankPage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        userRef: this.userRef,
      })
      this.resignUserList = this.resignUserList.concat(res.page.list)
      this.pageTotal = res.page.count
    },
    lower() {
      // alert(0)
      this.pageNo++
      console.log('当前页数', this.pageNo)
      if (this.pageNo > Math.ceil(this.pageTotal)) {
        return
      } else {
        this.getlist()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  // padding-top: 20rpx;
  margin: 0 auto;
  position: relative;

  .content-k {
    width: 710rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin: 0 auto;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 20rpx;
    white-space: pre-wrap;
    position: relative;
  }

  .content-img-k {
    width: 750rpx;
    margin: 0 auto;

    image {
      width: 100%;
      height: auto;
    }
  }
  .content-ph {
    position: absolute;
    top: 705rpx;
    left: 0;
    width: 100%;
    height: 185rpx;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .content-ph-one {
      position: relative;
      image {
        width: 260rpx;
        height: 198rpx;
      }
      .content-ph-one-name {
        position: absolute;
        top: -10rpx;
        padding: 0 40rpx;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        font-size: 32rpx;
        color: #ffffff;
        font-weight: bold;
      }
      .content-ph-one-f {
        position: absolute;
        top: 30rpx;
        width: 100%;
        padding: 0 40rpx;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        box-sizing: border-box;
        font-size: 32rpx;
        font-weight: bold;
        background: -webkit-linear-gradient(
          45deg,
          #ffe8cd,
          #e7af6e
        ); /* Chrome, Safari */
        background: linear-gradient(45deg, #ffe8cd, #e7af6e); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 在不支持 -webkit-text-fill-color 的浏览器中，字体颜色设置为透明 */
        display: inline-block;
      }
    }
    .content-ph-two {
      position: relative;
      image {
        width: 205rpx;
        height: 155rpx;
      }
      .content-ph-two-name {
        position: absolute;
        top: -10rpx;
        padding: 0 40rpx;

        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #ffffff;
        font-weight: bold;
      }
      .content-ph-two-f {
        position: absolute;
        top: 25rpx;
        padding: 0 40rpx;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        font-weight: bold;
        background: -webkit-linear-gradient(
          45deg,
          #ffe8cd,
          #e7af6e
        ); /* Chrome, Safari */
        background: linear-gradient(45deg, #ffe8cd, #e7af6e); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 在不支持 -webkit-text-fill-color 的浏览器中，字体颜色设置为透明 */
        display: inline-block;
      }
    }
    .content-ph-three {
      position: relative;
      image {
        width: 205rpx;
        height: 155rpx;
      }
      .content-ph-three-name {
        position: absolute;
        top: -10rpx;
        padding: 0 40rpx;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        font-size: 28rpx;
        color: #ffffff;
        font-weight: bold;
      }
      .content-ph-three-f {
        position: absolute;
        top: 25rpx;
        padding: 0 40rpx;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        font-weight: bold;
        background: -webkit-linear-gradient(
          45deg,
          #ffe8cd,
          #e7af6e
        ); /* Chrome, Safari */
        background: linear-gradient(45deg, #ffe8cd, #e7af6e); /* 标准语法 */
        -webkit-background-clip: text; /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent; /* Chrome, Safari */
        color: transparent; /* 在不支持 -webkit-text-fill-color 的浏览器中，字体颜色设置为透明 */
        display: inline-block;
      }
    }
  }
}

.content-pm-list {
  margin: 0 auto;
  position: absolute;
  top: 908rpx;
  left: 0;
  width: 100%;

  .content-pm-list-icom {
    margin: 0 auto;
    text-align: center;
    position: relative;
    image {
      width: 724rpx;
      height: 859rpx;
    }
    .scroll-view-k {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      // background-color: red;
      height: 100%;
      padding: 0rpx 60rpx;
      .scroll-view-k-top {
        padding-top: 50rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #d39183;
        padding-bottom: 35rpx;
        .meberItem-idnex {
          flex: 1;
          font-size: 30rpx;
        }
        .meberItem-name {
          flex: 1;
          font-size: 30rpx;
        }
        .meberItem-hx {
          flex: 2;
          font-size: 30rpx;
        }
        .meberItem-f {
          flex: 1;
          font-size: 30rpx;
        }
      }
      .scroll-view-k-item {
        height: 90rpx;
        display: flex;
        align-items: center;
        // border-bottom: 1rpx solid #d39183;

        .meberItem-idnex {
          flex: 1;
          font-size: 30rpx;
          text {
            padding: 5rpx 16rpx;
            border-radius: 50rpx;
            background: #a30c05;
            border: 4rpx solid #da7365;
            font-size: 32rpx;
            color: #ffe5cb;
          }
        }
        .meberItem-name {
          flex: 1;
          font-size: 32rpx;
          font-weight: bold;
          color: #000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .meberItem-hx {
          flex: 2;
          font-size: 32rpx;
          color: #d66864;
          font-weight: bold;
        }
        .meberItem-f {
          flex: 1;
          font-size: 30rpx;
          color: #a00c05;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
